<article>
  <p>Chosen是用来增强单选列表和多选列表的更佳选择。</p>
</article>

<section>
  <header><h3>多项选择和单项选择</h3></header>
  <article>
    <div class="example">
      <div class="row">
        <div class="col-md-6">
          <select data-placeholder="选择一个宠物..." class="chosen-select form-control" tabindex="2">
            <option value=""></option>
            <option value="cat">小猫</option>
            <option value="dog">小狗</option>
            <option value="fish">金鱼</option>
            <option value="dragon">龙</option>
          </select>
        </div>
        <div class="col-md-6">
          <select data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple>
            <option value="strawberries">草莓</option>
            <option value="apple">苹果</option>
            <option value="orange">橙子</option>
            <option value="cherry">樱桃</option>
            <option value="banana">香蕉</option>
            <option value="figs">无花果</option>
          </select>
        </div>
      </div>
    </div>
  </article>
</section>

<section>
  <header><h3>图标选择插件</h3></header>
  <article>
    <p>为方便选择漂亮的图标，依赖于Chosen新作了图标选择插件。</p>
    <div class="example">
      <form>
        <select class="chosen-select form-control" name="chosenIcons" id="chosenIcons" data-value='icon-star'></select>
      </form>
    </div>
  </article>
</section>

<script>
function onPageLoad() {return false;}
function afterPageLoad() {
  if($.fn.chosen) $('#pageBody .chosen-select').chosen();
  if($.fn.chosenIcons) $('#chosenIcons').chosenIcons();
  setTimeout($.doc.mutePageLoading, 500);
}
</script>
